
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin:0; padding:0;}
li{list-style:none; }

#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul li{height:500px;opacity: 0;position: absolute;left: 0;top: 0;z-index: 0;transition: opacity 1.5s;}
#div1 ul li.ac{z-index: 5;opacity: 1;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;cursor: pointer;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goPrev{left: 0;}
#goNext{right: 0;}
img{width:850px; height:500px;}
</style>
</head>

<body>
<div id="div1">
	<ul>
    	<li class="ac"><a href="javascript:alert(0);"><img src="1.jpg" /></a></li>
    	<li><a href="javascript:alert(1);"><img src="2.jpg" /></a></li>
    	<li><a href="javascript:alert(2);"><img src="3.jpg" /></a></li>
    	<li><a href="javascript:alert(3);"><img src="4.jpg" /></a></li>
    	<li><a href="javascript:alert(4);"><img src="5.jpg" /></a></li>
    </ul>
    <ol>
    	<li class="ac">1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    </ol>
    <a href="javascript:;" id="goPrev">&laquo;</a>
    <a href="javascript:;" id="goNext">&raquo;</a>
</div>
<script>
  const box = document.querySelector('#div1')
  const imgs = document.querySelectorAll('#div1 ul li')
  const btns = document.querySelectorAll('#div1 ol li')
  const goNext = document.querySelector('#goNext')
  const goPrev = document.querySelector('#goPrev')
  // 记录当前索引（正在切换的索引）
  var index = 0
  // 记录上一次的索引
  var lastIndex = 0

  // 按钮点击切换
  btns.forEach((btn, i) => {
    btn.onclick = function () {
      // 先把旧的index赋值给lastIndex
      // 再去给index赋新的值
      lastIndex = index
      index = i
      change()
    }
  })

  // 向右切换
  goNext.onclick = function () {
    lastIndex = index
    index++
    // index的合法范围0 ~ length-1
    if (index === imgs.length) {
      // 超出了，回到0
      index = 0
    }
    change()
  }

  // 向前切换
  goPrev.onclick = function () {
    lastIndex = index
    index--
    if (index < 0) {
      // 超出范围
      index = imgs.length - 1
    }
    change()
  }

  // 自动轮播：每隔3秒用代码来触发向右的点击事件
  auto()
  function auto () {
    // box.timer = setInterval(() => {
    //   // goNext.onclick = function () {}
    //   // 这个写法从对象的角度理解就是在给goNext这个对象加了一个onclick方法
    //   goNext.onclick()
    // }, 3000)
    box.timer = setInterval(goNext.onclick, 2000)
  }

  box.onmouseenter = function () {
    clearInterval(box.timer)
  }
  // box.onmouseleave = function () {
  //   auto()
  // }
  box.onmouseleave = auto

  function change () {
    btns[lastIndex].classList.remove('ac')
    btns[index].classList.add('ac')
    imgs[lastIndex].classList.remove('ac')
    imgs[index].classList.add('ac')
  }
 
</script>
</body>
</html>
